<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>proxy</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<h1 id="h1">proxy</h1>
		<h2 id="title">111</h2>
		<div id="descript">222</div>
		<p id="p1">这是一个p</p>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">
	// 封装一下
    // 数据绑定，当某些数据改变时候同步更新dom
    class DomAutoFlush {
    	constructor(data) {
    		this.data = new Map()
    	}
    	setData(argData) {
    		for(let property in argData) {
    			let docObj = this.data.get(property) 
    			if(this.data.has(property) )  {
    				docObj = this.data.get(property) 
    				if(!docObj) continue ;
    			} else {
					docObj = document.getElementById(property)
					this.data.set(property, docObj)
					console.log(docObj)
    			}
    			docObj && (docObj.innerHTML = argData[property])
    		}
    	}
    }


    // 定义我们的数据
    let obj = new DomAutoFlush({
    	title: '',
    	descript: ''
    });

    var i = 0;
    setInterval(function(){
    	i++ 
    	var properties = {
    		title: new Date().toLocaleString(),
    		descript: new Date().toLocaleTimeString(),
    		aa : new Date()
    	}
    	if(i === 5) {
    		properties.h1 = new Date().toLocaleString()
    	}


    	if(i >=6) {
    		properties.p1 = Math.random()
    	}

    	obj.setData(properties);

    }, 1000)
</script>
</body>
</html>